<template>
  <div>
    <div class="search-header">
      <div class="back" @click="back"><i class="iconfont icon-left"></i></div>
      <div class="search-box"><input v-model="searchName" type="search" placeholder="搜索商品"><span @click="search(searchName)">搜索</span></div>
    </div>
    <div class="v-wrapper">
      <div class="v-container">
        <div class="search-title">热门</div>
        <div class="tops">
          <span @click="search(item.hotelName)" class="tops-banner" v-for="item in tops" :key="item.hotelId">{{item.hotelName}}</span>
        </div>
        <div class="search-title">历史搜索</div>
        <div class="history-record">
          <div class="history-list" v-for="item in record"><i class="iconfont icon-sousuo"></i>
            <p @click="search(item.name)">{{item.name}}</p></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from '../../axios/axios';

  export default {
    data() {
      return {
        tops: [],
        record: [],
        searchName:''
      };
    },
    created() {
      var _this = this;
      var token = localStorage.getItem('userToken');
      var searchdata = JSON.stringify({
        'actionName': 'queryListPage',
        'controllerName': 'userSearch',
        'data': [{}, 1, 10]
      });
      console.log(token);
      if (token) {
        this.$root.tokenValidat(token, function (data) {
          if(data){
            axios.post({
              data: searchdata,
              callback(res) {
                console.log(res);
                _this.tops = res.data.data.hotel;
                _this.record = res.data.data.user;
              }
            })
          }else{
            _this.$router.push('/login');
          }
        })
      } else {
        _this.$router.push('/login');
        console.log('ssssss');
      }
    },
    mounted() {

    },
    methods: {
      back: function () {
        this.$router.back(-1);
      },
      search: function(name){
        this.$router.push({path: '/goodList', query: {searchName: name}});
      }
    },
    components: {}
  };
</script>

<style type="text/scss" lang="scss">
  @import "../../common/style/public";

  .search-header {
    width: 100%;
    height: 44px;
    position: fixed;
    top: 0;
    padding: 5px 10px;
    background-color: #FFFFFF;
    z-index: 100;
    box-sizing: border-box;
    display: flex;
    .back {
      width: 10%;
      padding-top: 3px;
      i {
        font-size: 22px;
        color: #838383;
      }
    }
    .search-box {
      width: 90%;
      display: flex;
      span{
        width: 15%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 20px;
        background: linear-gradient(to right, #f06a22, #f04022);
        color: #FFFFFF;
        margin-top: 2px;
      }
      input {
        width: 80%;
        height: 100%;
        padding-left: 10px;
        border-bottom: solid 1px #f5f5f5;
        margin-right: 5%;
        vertical-align: top;
      }
    }
  }

  .search-title {
    width: 100%;
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
    color: #a9a9a9;
    box-sizing: border-box;
    background-color: #FFFFFF;
  }

  .tops {
    width: 100%;
    height: auto;
    display: flex;
    padding: 0 15px;
    flex-wrap: wrap;
    flex-direction: row;
    box-sizing: border-box;
    background-color: #FFFFFF;
    .tops-banner {
      display: block;
      padding: 5px 8px;
      border: solid 1px #f5f5f5;
      margin-right: 10px;
      margin-bottom: 10px;
      border-radius: 5px;
    }
  }

  .history-record {
    width: 100%;
    border-top: solid 1px #f5f5f5;
    background-color: #FFFFFF;
    padding-bottom: 20px;
    .history-list {
      width: calc(100% - 30px);
      height: 35px;
      line-height: 35px;
      display: flex;
      margin: 0 15px;
      box-sizing: border-box;
      border-bottom: solid 1px #f5f5f5;
      i {
        font-size: 22px;
      }
      p {
        flex: 9;
        padding-left: 10px;
        box-sizing: border-box;
      }
    }
  }
</style>
